<template>
    <div>
        <p>品牌：{{item.brand}}</p>&emsp;
        <p>价格：{{item.price}}</p>&emsp;
        <button @click="$router.back()">返回</button>
    </div>
</template>

<script setup lang='ts'>
    import {useRoute} from 'vue-router'
    import {watch, reactive} from 'vue'

    const route = useRoute()
    const data = [
        {brand: '小米', price: '2999', id: '1'},
        {brand: '苹果', price: '14999', id: '2'},
        {brand: '华为', price: '4999', id: '3'}
    ]
    const item = data.find(item => item.id === route.params.id)

    // console.log(route.query.id)
    console.log(route.params.id)
</script>

<style scoped lang='less'>
    div {
        display: flex;
        justify-content: center;
        margin-top:200px;
    }
</style>
